<!-- filepath: src/components/TagInput.vue -->
<template>
    <div class="p-6 bg-white rounded-xl shadow-md w-full max-w-md mx-auto">
        <!-- 已添加标签 -->
        <div>
            <div class="mb-2 text-gray-800 font-medium text-base">已添加标签</div>
            <div class="flex flex-wrap gap-2 mb-5 min-h-[2.5rem]">

                <span v-if="tagsStringType.length === 0" class="text-gray-400 text-sm">暂无标签</span>

                <span v-for="tag in tagsTagType"
                    class="inline-flex items-center bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-sm shadow-sm">
                    {{ tag.name }}
                    <button type="button" @click="removeTag(tag)" class="ml-1 text-blue-400 hover:text-red-500 transition-colors"
                        title="移除标签">
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 16 16">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4l8 8m0-8L4 12" />
                        </svg>
                    </button>

                </span>
            </div>
        </div>
        <!-- 可选标签 -->
        <div>
            <div class="mb-2 text-gray-800 font-medium text-base">可选标签</div>
            <div class="flex flex-wrap gap-2">
                <button v-for="tag in getAlltagList"  @click="addTag(tag)"
                    class="bg-gray-100 hover:bg-blue-500 hover:text-white text-gray-700 px-4 py-1 rounded-full text-sm border border-gray-200 transition disabled:opacity-40 disabled:cursor-not-allowed"
                    :disabled="tagsStringType.includes(tag.name)">
                    {{ tag.name }}
                </button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { TagsInter } from '../ts/types/article';

const tagsStringType = ref<string[]>([]); //用来优化操作的 string类型
const tagsTagType = ref<TagsInter[]>([]); //这个表示当前文章拥有的标签列表 标签类型
let getAlltagList = ref<TagsInter[]>([])//这个是全部的标签
getAlltagList.value = [
    {
        id: 1,
        type: '',
        name: 'java',
        createdId: null,
        createdAt: null,
        updatedAt: null
    },    {
        id: 2,
        type: '',
        name: 'vue',
        createdId: null,
        createdAt: null,
        updatedAt: null
    },    {
        id: 3,
        type: '',
        name: 'springboot',
        createdId: null,
        createdAt: null,
        updatedAt: null
    },
]
function addTag(tag: TagsInter) {
    if (!tagsStringType.value.includes(tag.name)) {
        tagsStringType.value.push(tag.name);
        tagsTagType.value.push(tag)
    }
}

function removeTag(tag: TagsInter) {
    tagsStringType.value = tagsStringType.value.filter(item => item !== tag.name)
    tagsTagType.value = tagsTagType.value.filter(item => item !== tag)
}
</script>